Repository navigation
Redesign the homepage and marketing pages - #75
Merged
Merged
Conversation
…rview`, and `HomePageStandardCompliance`. Add experimental `TrustPairR` and `ValidationLab` components for prototyping new designs.
…eAgentDemo` and `HomePageCtaCard`. Simplify design and enhance functionality with interactive and animated elements.
…roposals, and design explorations. Include structured guidelines, reasoning behind visual enhancements, and new asset production plans.
… components for cleaner implementation and reuse, removing `HomePageAgentDemo` while updating styles and templates accordingly.
… components for cleaner implementation and reuse, removing `HomePageAgentDemo` while updating styles and templates accordingly.
… better visual hierarchy.
…ectory. Remove `HomePageMultiplatform.vue` and introduce `CompanionA.vue`, `CompanionB.vue`, `CompanionC.vue`, and `CompanionC2.vue` for enhanced modularity and design experimentation.
…A.vue`, `LicenseB.vue`, `LicenseC.vue`, and `LicenseD.vue`. Streamline styles and templates for clearer structure and design experimentation.
…tions.vue`, `FaqRailContents.vue`, and `FaqRailPanel.vue`. Introduce scoped styles, improve layout experimentation, and support for group-specific interactions.
… with "Invoice tutorial video", reorder "Sample gallery".
…ets.md`, `brainstorm.md`, `PROMPT.md`, and `proposals.md`) to declutter the repository and reflect finalized design implementation.
…omePageSampleGallery.vue`, `HomePageWindowContainer.vue`, `PricingResellers.vue`, and `arrow-right.svg`). Refactor `CustomPages.css` and streamline `LicensePurchaseSuccess.vue` structure. Optimize `FeaturesOverview.vue` for better list iteration clarity.
…nd unused classes across components. Refactor `CustomPages.css` for cleaner definitions and consistency. Clarify visual hierarchy in license and pricing sections. Simplify homepage structure and enhance modularity for reusability.
… categories and items more concisely. Simplify and modularize homepage CTA visuals with `ctaVisual.css`. Streamline feature summaries by removing redundant descriptions for cleaner, focused content.
…usable variables for cleaner and more maintainable background styling.
…sOverview.vue` rendering for clarity and maintainability. Streamline `CustomPages.css` by consolidating panel styles and removing card-specific rules. Adjust margins in `LicensePurchaseSuccess.vue` for consistency.
…ularity by refining CSS variables and selectors in `CustomPages.css`. Optimize list and panel structures across components for clarity and maintainability. Adjust and centralize visual hierarchy for licenses, features, and CTAs. Simplify and refactor highlighter and statistics logic for efficiency.
…e`. Replace runtime code highlighting with build-time via `quickStart.data.ts`. Modularize license pricing in `prices.ts` for reuse. Refactor homepage components and CSS for clarity, maintainability, and visual consistency.
Nothing styles or queries them. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
DocumentTemplate.vue looks documents up by key and never reads doc.id. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
.custom-page p and .custom-page ul already set 1rem, 1.5rem and text-2, and the list items and the spans in them inherit those values. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- .action: VitePress's preflight already gives buttons font: inherit, border 0 and a pointer cursor (links get the pointer from the browser); the computed border-style is now solid instead of none, at zero width - Companion: the download items' hover colour lost to .custom-page a:not(.action):hover, which is what readers see (brand blue); their text-decoration and the view buttons' cursor came from the base styles - FAQ answer links and legal document links take brand-1 from .custom-page p a and .vp-doc a - h1, h3 and button values equal to the shared .custom-page h1/h3 and .action rules (hero title weight, FAQ category title size and colour, contact business name size, pricing button alignment and hover text colour) Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The production build's lightningcss pass (Vite's baseline-widely-available target) writes -webkit-mask*, -webkit-mask-composite: xor and -webkit-background-clip for every rule that uses them; the built stylesheet was checked rule by rule. -webkit-text-fill-color stays: it is not a prefixed copy of anything. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The only two places that used CSS nesting; every other style block is flat. The built stylesheet is unchanged apart from where Vue places the scope attribute on one :hover rule. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- Trust: the foundations panel is the two-by-two grid itself instead of a panel holding one .cells div, so the panels no longer need a flex column to stretch it (the compliance panel lays out the same as a block) - Quick start: the composer takes the dock's spacing as its own margin Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…ts 32px Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
… consistency** - Standardize background glows across all pages to a single brand blue for better consistency in light and dark themes. - Simplify glow and gradient logic in `CustomPages.css`. - Refactor homepage sections: introduce cleaner layout for "benefits" and "statistics" with improved alignment and responsiveness. - Replace tagline and unused sections with concise benefit lists derived from data. - Adjust radial glow intensities in license panel styles for subtle responsiveness. - Update various icons with consistent Font Awesome classes to improve clarity and alignment.
…gnment - Eliminated the `icon` property from `StatisticEntry` and removed associated icon rendering logic. - Adjusted statistic styles for better alignment and spacing. - Unified layout rules between statistics and benefits for consistent typography and responsiveness.
…tatistics and benefits sections.
…branding with new logos and visual consistency across themes."
- Remove `texture-dots` class for cleaner container styling. - Adjust font sizes and line heights in `PricingTiers` and `PricingFaq` for improved readability and consistency.
…ontent, improve CTA animations, and streamline component styles.
…d logic - Refactor licensing document views: remove contents rail and compact menus for a streamlined layout. - Improve metadata typography, alignment, and colors for better readability. - Optimize CSS for consistency and responsiveness. - Update link to the configuration guide for better clarity. - Remove unused sections and redundant logic from license documents data.
… consistency - Streamline `DocumentTemplate.vue` structure, simplifying meta section and navigation. - Refactor CSS: enhance color variables, adjust alignment, and clean up meta styles. - Introduce `grain-dark.png` for improved dark theme visuals.
…ogic, adjust layout for better spacing, and improve animation logic for visibility-based interactions.
…ight typo, add lazy loading to images, and update favicon and logo files.
…ions, add `noEmit`, refactor imports, and enhance sidebar handling.
…tree-shaking, and refactor icons usage across components.
…om Font Awesome. Add detailed descriptions to all features and refactor feature data structure for modularity and improved readability.
…om Font Awesome. Add detailed descriptions to all features and refactor feature data structure for modularity and improved readability.
…dd custom icons, and adjust feature icon mapping for clarity.
…update styles, and remove unused elements for cleaner design."
… with `margin-top`, update colors, and refine shadow and list item styles for consistency.
…d `HomePageCtaTutorialVisual` and `HomePageCtaFeaturesVisual`, update links and descriptions, and remove unused sample gallery reference.
…, adjust open item styling with inset shadows, improve hover behavior, and ensure touch compatibility.
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
The CI install step lacks the token required for the new private-registry dependencies, blocking the documentation build, while contrast and keyboard-focus defects also remain unresolved.
4 open issues
What changed in this PR
Redesigns QuestPDF’s homepage and marketing pages around a shared light/dark visual system within the VitePress documentation site.
Changes:
- Rebuilds the homepage with animated cards, a Quick Start demo, and Companion, Trust, and License sections.
- Updates pricing, legal, and contact layouts, centralizes displayed prices, and groups FAQ content.
- Moves icons to npm packages and highlighting to build time, updates image references to WebP, and removes obsolete components and assets.
| File | Description |
|---|---|
| tsconfig.json | Enables TypeScript-extension imports without emitting files. |
| package.json | Adds icon packages and Shiki; updates site dependencies. |
| docs/quick-start.md | Uses WebP example images. |
| docs/public/star.svg | Removes obsolete star asset. |
| docs/public/nuget.svg | Removes obsolete NuGet asset. |
| docs/public/homepage/supported-platforms/windows.svg | Removes standalone Windows icon. |
| docs/public/homepage/supported-platforms/vscode.svg | Removes standalone VS Code icon. |
| docs/public/homepage/supported-platforms/visual-studio.svg | Removes standalone Visual Studio icon. |
| docs/public/homepage/supported-platforms/rider.svg | Removes standalone Rider icon. |
| docs/public/homepage/supported-platforms/linux.svg | Removes standalone Linux icon. |
| docs/public/homepage/supported-platforms/docker.svg | Removes standalone Docker icon. |
| docs/public/homepage/supported-platforms/azure.svg | Removes standalone Azure icon. |
| docs/public/homepage/supported-platforms/aws.svg | Removes standalone AWS icon. |
| docs/public/homepage/supported-platforms/apple.svg | Removes standalone Apple icon. |
| docs/public/homepage/noise.svg | Removes old background texture. |
| docs/public/homepage/getting-started/arrow-right.svg | Removes obsolete arrow asset. |
| docs/invoice-tutorial.md | Uses the WebP invoice image. |
| docs/companion/usage.md | Clarifies platform and installer labels. |
| docs/companion/download.md | Clarifies package formats and Linux distributions. |
| docs/.vitepress/theme/VitepressAdjustments.css | Updates theme colors, navigation, search, and PDF sizing. |
| docs/.vitepress/theme/statistics.data.ts | Fetches statistics concurrently and adds adoption metrics. |
| docs/.vitepress/theme/pricing/PricingResellers.vue | Removes the separate reseller section. |
| docs/.vitepress/theme/pricing/PricingIndex.vue | Updates pricing-page structure and spacing. |
| docs/.vitepress/theme/pricing/PricingContact.vue | Combines reseller information and contact panels. |
| docs/.vitepress/theme/pricing/prices.ts | Centralizes displayed license prices. |
| docs/.vitepress/theme/pricing/faq.ts | Organizes FAQ content by topic. |
| docs/.vitepress/theme/plausibleEvents.ts | Removes the old demo’s analytics helper. |
| docs/.vitepress/theme/PaddleIntegration.vue | Removes the standalone initialization component. |
| docs/.vitepress/theme/paddle.ts | Types configuration and exports the Paddle loader. |
| docs/.vitepress/theme/license/LicenseIndex.vue | Restyles the legal-document directory. |
| docs/.vitepress/theme/license/documents/licenseDocuments.data.ts | Extracts metadata and adds heading anchors. |
| docs/.vitepress/theme/license/documents/DocumentTemplate.vue | Updates legal-document layout and metadata display. |
| docs/.vitepress/theme/LayoutFooter.vue | Updates footer styling and calculates the year. |
| docs/.vitepress/theme/Layout.vue | Initializes Paddle when the shared layout mounts. |
| docs/.vitepress/theme/Icon.vue | Renders packaged icon definitions as inline SVG. |
| docs/.vitepress/theme/homepage/sessionBuilder.ts | Builds highlighted demo states at build time. |
| docs/.vitepress/theme/homepage/quickStart.data.ts | Defines the invoice-editing demonstration. |
| docs/.vitepress/theme/homepage/HomePageWindowContainer.vue | Removes the old demo window wrapper. |
| docs/.vitepress/theme/homepage/HomePageTrust.vue | Combines compliance, privacy, and platform information. |
| docs/.vitepress/theme/homepage/HomePageStandardCompliance.vue | Removes the previous compliance section. |
| docs/.vitepress/theme/homepage/HomePageOverview.vue | Removes the previous foundations section. |
| docs/.vitepress/theme/homepage/HomePageMultiplatform.vue | Removes the previous platform grid. |
| docs/.vitepress/theme/homepage/HomePageLicense.vue | Rebuilds license benefits and tier summaries. |
| docs/.vitepress/theme/homepage/HomePageHighlightedCode.vue | Removes runtime highlighting component. |
| docs/.vitepress/theme/homepage/HomePageHero.vue | Rebuilds the hero around benefits and statistics. |
| docs/.vitepress/theme/homepage/HomePageGettingStarted.vue | Removes the old invoice tutorial section. |
| docs/.vitepress/theme/homepage/HomePageFeatures.vue | Removes the old feature-icon section. |
| docs/.vitepress/theme/homepage/HomePageCtaTutorialVisual.vue | Adds an animated invoice tutorial illustration. |
| docs/.vitepress/theme/homepage/HomePageCtaFeaturesVisual.vue | Adds an animated feature illustration. |
| docs/.vitepress/theme/homepage/HomePageCtaCard.vue | Adds reusable interactive navigation cards. |
| docs/.vitepress/theme/homepage/HomePageCtaBuildVisual.vue | Adds an illustration for the planned video card. |
| docs/.vitepress/theme/homepage/HomePageCompanion.vue | Rebuilds the Companion panel and adds download choices. |
| docs/.vitepress/theme/homepage/HomePageCodeFocusedApproach.vue | Removes the previous code-first section. |
| docs/.vitepress/theme/homepage/HomePageCodeContainer.vue | Removes the old code-window composition. |
| docs/.vitepress/theme/homepage/HomePageCodeAnimation.vue | Removes the previous live demonstration. |
| docs/.vitepress/theme/homepage/HomePageAdoption.vue | Removes the standalone statistics section. |
| docs/.vitepress/theme/homepage/HomePage.vue | Composes the redesigned homepage sections. |
| docs/.vitepress/theme/homepage/ctaVisual.css | Shares illustration geometry and styling. |
| docs/.vitepress/theme/homepage/ctaTimeline.ts | Provides shared animation sequencing and cancellation. |
| docs/.vitepress/theme/homepage/createCodeHighlighter.ts | Removes the runtime highlighter factory. |
| docs/.vitepress/theme/homepage/codeFolding.ts | Shares method-folding logic for the demo. |
| docs/.vitepress/theme/homepage/codeExamples/invoice.html | Adds the demo’s initial HTML invoice. |
| docs/.vitepress/theme/homepage/codeExamples/helloWorld.cs | Removes the previous hero example. |
| docs/.vitepress/theme/homepage/codeExamples/familiarProgrammingConcepts.cs | Removes an obsolete code sample. |
| docs/.vitepress/theme/homepage/codeExamples/codeFirstApproach.cs | Removes the previous code-first sample. |
| docs/.vitepress/theme/customIcons.ts | Defines custom icons compatible with the SVG renderer. |
| docs/.vitepress/theme/Contact.vue | Restyles support cards and business information. |
| docs/.vitepress/markdownit-imagesize-plugin.ts | Defaults Markdown images to lazy loading. |
| docs/.vitepress/config.ts | Updates branding, navigation, and documentation indexing. |
| .npmrc | Configures authenticated Font Awesome package access. |
Review effort: Balanced
| @@ -0,0 +1,2 @@ | |||
| @fortawesome:registry=https://npm.fontawesome.com/ | |||
| //npm.fontawesome.com/:_authToken=${FONTAWESOME_NPM_AUTH_TOKEN} | |||
Comment on lines
+111
to
+114
| function closeOnEscape(event: KeyboardEvent) { | ||
| if (event.key === "Escape") | ||
| isDownloadOpen.value = false; | ||
| } |
|
|
||
| .tier.professional .tier-name { | ||
| color: white; | ||
| background-color: light-dark(#2196F3, #1976D2); |
| } | ||
|
|
||
| .action.pricing-button:hover { | ||
| background-color: light-dark(#1B5E20, #388E3C); |
…ment # Conflicts: # docs/.vitepress/config.ts # package-lock.json # package.json
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.


Redesigns the homepage and the pricing, license, features overview and contact pages on one shared visual system, in light and dark.
Builds now need
FONTAWESOME_NPM_AUTH_TOKEN, in CI and in production.